<template>
	<view class="box" :style=" {width:'100%',  backgroundImage: 'url('+imgPlayer+')',backgroundRepeat:'no-repeat'}">

		<view class="content">
			<view class="top">
				<!-- 上集 -->
			</view>
			<view class="down">
				<!-- 下集 -->
			</view>
			<view class="audio">
				<image src="http://imcdn.shimaruanchuang.cn/chat/1707989260266ZFu3eA79UKsOe43ef91f829633620ce813da5a7d44ea.png"></image>
			</view>
			<view class="buttonBox">
				<u-button class="collect" type="success" text="收  藏" shape="circle" iconColor="#000000" v-if="num==0"
					@click="saveAndRemoveCollectFun" 　></u-button>
				<u-button class="collect" type="error" text="取消收藏" shape="circle" v-if="num==1"
					@click="saveAndRemoveCollectFun"></u-button>
				<u-button class="share" open-type="share" type="warning" text="分  享" shape="circle" style=""></u-button>
			</view>
			<view class="Payment" v-if="showPayment">
				<u-button type="success" :text="lockMoeny()" shape="circle" v-if="zero == 2" @click="moneyWeChatPayFun
				"></u-button>
				<u-button type="success" text="会员解锁" shape="circle" v-if="zero == 1"
					@click="vipUnlocksFun()"></u-button>
			</view>


		</view>
		<view class="audioBox">
			<view class="level">
				当前播放第{{listArr[previousNowCache].level}}集，共{{listArr.length}}集
			</view>
			<view class="player" @click="onAudio">
				<imt-audio :autoplay="false" :continue="false" :src="playSrcFun()" @prev="prevFun"
					@next="nextFun"></imt-audio>
			</view>
		</view>


		<view>
			<u-modal :show="show" :title="title" showCancelButton=true :content='content' @confirm="confirm"
				@cancel="cancel"></u-modal>

		</view>
	</view>
</template>

<script>
	import imtAudio from '@/components/imt-audio/imt-audio.vue'
	import {
		findAllPlayerByMainId,
		selectMyVideoPIByVideoId,
		selectVideoId,
		saveAndRemoveCollect,
		moneyWeChatPay,
		vipUnlocks,
		selectOneData,
		selectCountNumIsZero,
		updateclicks,
		saveHistory,
		selectimgPlayerbyid,
		login,
		moneyUnlocks,
		selectOrderId

	} from "../../config/api.js"

	export default {
		components: {
			imtAudio
		},
		data() {
			return {
				now: 0,
				//缓存的上一个音频index
				previousNowCache: 0,
				//所有的音频集
				listArr: [],
				videoId: 0, //上个页面的参数 
				num: 0,
				zero: 0, //用于弹出解锁音频判断 0代表都不弹出 1代表弹会员解锁 2代表弹出0.8元解锁
				unlockNum: 0.01,
				code: 0,
				showPayment: false,
				timer: null,
				//背景图
				imgPlayer: null,
				show: false,
				title: '提示',
				content: '确认是否支付成功？',
				msg: false,
				//订单id
				orderId: 0
			}
		},
		onLoad(e) {
			console.log("上个页面的参数：", e)
			this.videoId = e.id;
			if (e.now != undefined && e.now != null && e.now != "") {
				this.now = Number(e.now);
				this.previousNowCache = Number(e.now);
			}
			this.updateclicksFun();
			//查询收藏
			this.selectVideoIdFUn();
			//设置背景图
			this.selectimgPlayerbyidFun();
			//查询用户购买的所有集
			this.findAllPlayerByMainIdFun();
			this.selectCountNumIsZeroFun()
			

		},
		onShow(e) {

		},
		methods: {

			lockMoeny() {
				return this.listArr[this.now].moeny + "元解锁"

			},
			playSrcFun() {
				console.log("?????", this.listArr)
				let nowJi = this.listArr[this.now]
				console.log(nowJi.userPayFlag);
				if (nowJi.userPayFlag) {
					this.showPayment = false
					this.previousNowCache = this.now
					return nowJi.video
				} else {
					uni.showToast({
						title: "请先解锁",
						icon: "none"
					})

					this.showPayment = true
					return ""
				}
			},


			//设置背景图
			selectimgPlayerbyidFun() {
				let that = this
				let param = {
					id: that.videoId
				}
				selectimgPlayerbyid({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {

					that.imgPlayer = res.data.imgPlayer
					console.log("背景图", that.imgPlayer);
				}).catch((e) => {
					console.log("报错", e);
				})
			},
			//上一集
			prevFun() {
				let redySetNow = 0;

				if (this.now == this.listArr.length - 1) {
					redySetNow = 0;
				} else if (this.now == 0) {
					redySetNow = 0;
				} else {
					redySetNow = this.now - 1
				}
				this.previousNowCache = this.now
				this.now = redySetNow
				return
				// let nowJi = this.listArr[redySetNow]
				// if (nowJi.userPayFlag) {
				// 	this.now = redySetNow
				// 	this.zero = 0
				// } else {
				// 	uni.showToast({
				// 		title: "您还没有解锁本集",
				// 		icon: "none"
				// 	})

				// }
			},
			//下一集
			nextFun() {
				if (this.showPayment) {
					uni.showToast({
						title: "请先解锁",
						icon: "none"
					})
					return
				}
				let redySetNow = 0;

				if (this.now == this.listArr.length - 1) {
					redySetNow = 0;
				} else {
					redySetNow = this.now + 1
				}
				this.previousNowCache = this.now
				this.now = redySetNow
				return
				// let nowJi = this.listArr[redySetNow]
				// if (nowJi.userPayFlag) {
				// 	this.now = redySetNow

				// } else {
				// 	uni.showToast({
				// 		title: "您还没有解锁本集",
				// 		icon: "none"
				// 	})

				// }
			},
			saveHistoryFun() {

			},
			updateclicksFun() {
				let that = this
				//往后端传的参数
				let param = {
					id: that.videoId
				}
				updateclicks({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {

				}).catch((e) => {

				})
			},
			onAudio() {

			},
			//查询解锁次数 是否为0 有的话提示会员解锁    没有提示0.8元解锁
			selectCountNumIsZeroFun() {
				let that = this
				//往后端传的参数
				let param = {}
				selectCountNumIsZero({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					if (res.data == 0) {
						that.zero = 2

					} else {
						that.zero = 1
					}
				}).catch((e) => {
					console.log("报错", e);
				})
			},
			//查询用户购买记录
			findAllPlayerByMainIdFun() {
				let that = this
				//往后端传的参数
				let param = {
					videoMainId: that.videoId,
				}
				findAllPlayerByMainId({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					console.log("用户购买的所有集", res);
					if (res.code == 200) {
						if (res.data.length == 0) {
							that.listArr = []
						} else {
							that.listArr = res.data
						}
					}

				}).catch((e) => {
					console.log("报错", e);
				})
			},



			//用于会员解锁
			vipUnlocksFun() {
				let that = this
				//往后端传的参数
				let lockIndex = 0
				let param = {
					videoMainId: that.videoId,
					videoPlayerId: that.listArr[that.now].id
				}
				vipUnlocks({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {

					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
						uni.redirectTo({
							url: "/pages/details/details?now=" + that.now + "&id=" + that.videoId
						})
						//that.findAllPlayerByMainIdFun()
						return
					}
				}).catch((e) => {
					console.log("报错", e);
				})
			},

			// //用于金钱解锁
			// moneyUnlocksFun() {
			// 	let that = this
			// 	//往后端传的参数

			// 	let param = {

			// 	}
			// 	vipUnlocks({
			// 		custom: {
			// 			auth: true,
			// 			loading: false
			// 		},
			// 		params: param
			// 	}).then((res) => {

			// 		if (res.code == 200) {
			// 			uni.showToast({
			// 				title: res.message,
			// 				icon: "none"
			// 			})
			// 			that.findAllPlayerByMainIdFun()
			// 			that.now = lockIndex;
			// 			return
			// 		}

			// 	}).catch((e) => {
			// 		console.log("报错", e);
			// 	})
			// },



			//金钱解锁接口
			moneyWeChatPayFun() {
				let that = this
				let lockIndex = that.now + 1
				let param = {
					payValue: that.unlockNum,
					videoMainId: that.videoId,
					videoPlayerId: that.listArr[that.now].id
				}

				moneyWeChatPay({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					if (res.code == 200 && res.data != null) {
						console.log("res.data：", res.data);
						that.orderId = res.data.orderId
						console.log("that.orderId", that.orderId);
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: res.data.wxPayMpOrderResult.timeStamp,
							nonceStr: res.data.wxPayMpOrderResult.nonceStr,
							package: res.data.wxPayMpOrderResult.packageValue,
							signType: 'MD5',
							paySign: res.data.wxPayMpOrderResult.paySign,
							orderId: res.data.orderId,
							success(res) {
								that.show = true
							},
							fail(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						})
					}
				}).catch((e) => {
					console.log("e:", e);
				})

			},
			selectOrderIdFun() {
				var that = this
				let param = {
					orderId: that.orderId
				}
				selectOrderId({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					console.log("res.data.tradeStatus", res);

					if (res.data.tradeStatus == "2") {
						uni.redirectTo({
							url: "/pages/details/details?now=" + that.now +
								"&id=" + that.videoId
						})
						that.show = false
						return
					} else {
						uni.showToast({
							title: "请稍后再试",
							icon: "none"
						})
					}
				}).catch((e) => {
					console.log("报错", e);
				})
			},
			confirm() {
				let that = this
				this.selectOrderIdFun();
			},
			cancel() {
				this.show = false
			},



			selectVideoIdFUn() {
				let param = {
					videoId: this.videoId
				}
				let that = this;
				selectVideoId({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					if (res.data !== null) {
						that.num = 1
					} else {
						that.num = 0
					}
				}).catch((e) => {
					console.log("报错", e);
				})
			},
			saveAndRemoveCollectFun() {
				let that = this;
				let param = {
					videoId: this.videoId
				}

				saveAndRemoveCollect(param, {
					custom: {
						auth: true
					}
				}, ).then((res) => {
					console.log("res:", res);
					if (res.code == 200) {
						if (that.num == 0) {
							that.num = 1
						} else {
							that.num = 0
						}
					}
				}).catch(() => {
					console.log("请求失败了")
				})

			}

		}
	}
</script>

<style lang="scss">
	// page {
	//   background-image: url('http://imcdn.shimaruanchuang.cn/chat/1707233615764下载3.jpg');
	// 	background-repeat: no-repeat;
	// 	background-size: 100% 100%;
	// 	width: 100%;
	// }

	.box {



		.content {
			height: 1300rpx;
			.Payment {
				width: 350rpx;
				height: 70rpx;

				position: relative;
				/* 相对于其正常文档流进行定位 */
				top: 300rpx;
				left: 210rpx;
			}

			.vip {
				width: 350rpx;
				height: 70rpx;

				position: relative;
				/* 相对于其正常文档流进行定位 */
				top: 300rpx;
				left: 210rpx;
			}


			.buttonBox {
				width: 200rpx;
				height: 60rpx;
				padding-left: 280rpx;

				.share {}

			}

			.top {
				color: white;
				font-size: 30rpx;
				padding: 40rpx;
			}

			.down {
				color: white;
				font-size: 30rpx;
				padding-left: 40rpx;
			}

			.audio {
				image {

					width: 150rpx;
					height: 150rpx;
					padding-left: 320rpx;
					padding-top: 100rpx;
				}
			}
		}

		.audioBox {

			position: absolute;
			/* 设置绝对定位 */
			bottom: 10rpx;
			/* 距离容器底边为0像素 */
			width: 100%;
		}

	}
</style>